A Simple Blog Page

In the following screencast we will build the template for a simple blog webpage that has some dummy links and one real link to a demo page. In the end we will have a layout for a blog homepage and a blog entry itself. Let's dive in!

CSS Grid can be used to setup multiple displays within a single site. In the previous demo we used to CSS Grid to create a blog home page and an individual page for blog posts.

Separate pages within a web app can be stored in the same folder and linked to each other using <a> tags to create links with the name of the file as the target. For example, in a file index.html you could use the following code to link to another file in the same directory named go.html:

<a href="go.html">Go to page</a>

In the workspace below add a link from the homepage to the individual blog post. Once you have successfully done this, navigate to the blog entry and then customize the style to start to get an idea of what you might want a blog post layout to look like.

In this section we covered linking webpages together, with each page using its own custom CSS Grid layout. But what happens when people actually start using our web blog on different size screens?!?! Up next we'll cover how to get responsive!

Further Research

For more on Grid Layouts, see the below articles.

• Creating complex Grid layouts
• Nesting & overlapping of Grid items